<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta charset="utf-8">
    <title>大转盘</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <style>
        /* 添加一些简单的样式来美化删除按钮 */
        
        .default-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .default-button:hover {
            background-color: #d32f2f;
        }
    </style>
</head>

<body>
    <div class="gifts"></div>
    <div class="zjmd">
        <div class="title">获奖名单</div>
        <div class="mingdan" id="zhongjiangming"></div>
    </div>
    <div style="display: flex;justify-content: center;margin-top: 30px;">
        <img src="img/pc-titile.png" style="display: block;" />
    </div>
    <div class="canvas_box">
        <div class="can">
            <canvas id="canvas_bg"></canvas>
            <canvas id="canvas_main" class="canvas_ani"></canvas>
        </div>
        <img src="img/img12.png" id='pointer' />
        <img src="img/img13.png" id='pointer_but' />
    </div>

    <button class="default-button" id="clearButton" style="bottom: 80px;">清空缓存</button>

    <button class="default-button" onclick="window.location.href='https://xr4ml5.wx.kpoll.net/livevote/view?act=227302'">节目抽奖</button>
    <!-- 删除按钮 -->

    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/jQueryRotate.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        window.onload = function() {
            // 设置外框大小
            var wid = parseInt($('body').width() * 0.35);
            $('.canvas_box').width(wid).height(wid);
            wid = wid * 4;
            $('.can').width(wid).height(wid);
            var angleVal = 0;

            // 奖品参数
            var prizeVal = [{
                img: 'img2',
                text: '1号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '2号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '3号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '4号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '5号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '6号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '7号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '8号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '9号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }, {
                img: 'img2',
                text: '10号',
                wid: wid * 0.1,
                hei: wid * 0.1
            }];

            // 从 localStorage 加载桌号
            let deskNumber = parseInt(localStorage.getItem('deskNumber')) || 1; // 若没有则初始化为1
            var rotateType = true;

            // 从 localStorage 加载已中奖的名单
            loadWinners();

            $("#pointer_but").on('click', function() {
                if (rotateType == false) {
                    return false;
                }
                $('#canvas_main').removeClass('canvas_ani');
                rotateType = false;

                var prizeNum = Math.floor(Math.random() * prizeVal.length);

                $('#canvas_main').rotate({
                    duration: 8000,
                    angle: angleVal,
                    animateTo: 1800 - prizeNum * 360 / prizeVal.length,
                    easing: $.easing.easeOutSine,
                    callback: function() {
                        alert(prizeVal[prizeNum].text);

                        // 动态创建并添加 span 元素
                        const spanElement = document.createElement('span');
                        spanElement.innerHTML = `第${deskNumber}号桌 <strong>${prizeVal[prizeNum].text}</strong>`;
                        spanElement.style.display = 'block';
                        spanElement.style.marginTop = '10px';
                        document.getElementById('zhongjiangming').appendChild(spanElement);

                        // 保存获奖信息到 localStorage
                        saveWinner(deskNumber, prizeVal[prizeNum].text);

                        deskNumber++; // 桌号自增
                        localStorage.setItem('deskNumber', deskNumber); // 更新桌号到 localStorage
                        rotateType = true;
                    }
                });
            });

            // 删除缓存的事件处理
            document.getElementById('clearButton').addEventListener('click', function() {
                localStorage.removeItem('winners'); // 清空获奖名单缓存
                localStorage.removeItem('deskNumber'); // 清空桌号缓存
                document.getElementById('zhongjiangming').innerHTML = ''; // 清空显示的获奖名单
                deskNumber = 1; // 重置桌号
                alert('缓存已清空！');
            });

            // 其他的初始化代码...
            var canvasArr = {
                'width': wid,
                'height': wid,
                'bgcolor': '#5a9cff',
                'border': wid * 0.06,
                'lightnum': 24,
                'lightwid': wid * 0.036
            };

            class htTurntable {
                constructor() {
                    this.canvasbg = document.getElementsByTagName('canvas')[0];
                    this.contextbg = this.canvasbg.getContext('2d');
                    this.canvas = document.getElementsByTagName('canvas')[1];
                    this.context = this.canvas.getContext('2d');
                }
                init() {
                    this.canvasbg.width = canvasArr.width;
                    this.canvasbg.height = canvasArr.height;
                    this.canvas.width = canvasArr.width;
                    this.canvas.height = canvasArr.height;
                    this.bgfun();
                    this.bglight();
                    this.prize();
                    this.iconfun();
                    this.bglight('#FFFFFF', '#ffcf4d');
                    this.bglightani();
                    $('.can').css('transform', 'scale(0.25)');
                    $('.can').css('margin-left', -wid / 2);
                    $('.can').css('margin-top', -wid / 2);
                }
                bgfun() {
                    this.contextbg.beginPath();
                    let clg = this.contextbg.createLinearGradient(0, 0, 0, canvasArr.height);
                    clg.addColorStop(0, '#fed149');
                    clg.addColorStop(1, '#ff7d05');
                    this.contextbg.fillStyle = clg;
                    this.contextbg.arc(canvasArr.width / 2, canvasArr.height / 2, canvasArr.width / 2, 0, Math.PI * 2);
                    this.contextbg.closePath();
                    this.contextbg.fill();

                    this.contextbg.beginPath();
                    this.contextbg.fillStyle = '#FFFFFF';
                    this.contextbg.arc(canvasArr.width / 2, canvasArr.height / 2, canvasArr.width / 2 - canvasArr.border, 0, Math.PI * 2);
                    this.contextbg.closePath();
                    this.contextbg.fill();
                }
                bglight(cor1, cor2) {
                    for (let i = 0; i < canvasArr.lightnum; i++) {
                        this.contextbg.fillStyle = i % 2 == 0 ? cor1 : cor2;
                        this.contextbg.beginPath();
                        this.contextbg.arc(canvasArr.width / 2 + (canvasArr.width / 2 - canvasArr.border / 2) * Math.cos(360 / canvasArr.lightnum * i * Math.PI / 180), canvasArr.width / 2 + (canvasArr.width / 2 - canvasArr.border / 2) * Math.sin(360 / canvasArr.lightnum * i * Math.PI / 180), canvasArr.lightwid / 2, 0, Math.PI * 2);
                        this.contextbg.closePath();
                        this.contextbg.fill();
                    }
                }
                bglightani() {
                    let that = this;
                    let i = 0;
                    setInterval(function() {
                        i++;
                        if (i % 2 == 0) {
                            that.bglight('#FFFFFF', '#ffcf4d');
                        } else {
                            that.bglight('#ffcf4d', '#FFFFFF');
                        }
                    }, 600);
                }
                prize() {
                    for (let i = 0; i < prizeVal.length; i++) {
                        this.context.beginPath();
                        this.context.fillStyle = i % 2 == 0 ? "#fff8f4" : "#ffe4d6";
                        this.context.moveTo(canvasArr.width / 2, canvasArr.height / 2);
                        this.context.arc(canvasArr.width / 2, canvasArr.height / 2, canvasArr.width / 2 - canvasArr.border, 2 * Math.PI / prizeVal.length * i - 0.5 * Math.PI - Math.PI / prizeVal.length, 2 * Math.PI / prizeVal.length * (i + 1) - 0.5 * Math.PI - Math.PI / prizeVal.length);
                        this.context.closePath();
                        this.context.fill();
                    }
                }
                iconfun() {
                    let step = 2 * Math.PI / prizeVal.length;
                    for (let i = 0; i < prizeVal.length; i++) {
                        this.context.save();
                        this.context.translate(canvasArr.width / 2, canvasArr.height / 2);
                        this.context.rotate(step * (i));
                        let img = new Image();
                        img.src = $('#' + prizeVal[i].img).attr('src');
                        this.context.drawImage(img, -prizeVal[i].wid / 2, -canvasArr.height / 2.4, prizeVal[i].wid, prizeVal[i].hei);
                        let textval = prizeVal[i].text.split(',');
                        for (let j = 0; j < textval.length; j++) {
                            this.context.beginPath();
                            this.context.font = "bold 100px Microsoft YaHei";
                            this.context.textAlign = "center";
                            this.context.fillStyle = "#722207";
                            this.context.fillText(textval[j], 0, -canvasArr.height / 3.9 + 64 * j);
                        }
                        this.context.restore();
                    }
                }
            }
            new htTurntable().init();

            // 保存获奖信息到 localStorage
            function saveWinner(deskNumber, prizeText) {
                let winners = JSON.parse(localStorage.getItem('winners')) || [];
                winners.push({
                    deskNumber: deskNumber,
                    prizeText: prizeText
                });
                localStorage.setItem('winners', JSON.stringify(winners));
            }

            // 从 localStorage 加载获奖名单
            function loadWinners() {
                let winners = JSON.parse(localStorage.getItem('winners')) || [];
                winners.forEach(function(winner) {
                    const spanElement = document.createElement('span');
                    spanElement.innerHTML = `第${winner.deskNumber}号桌 <strong>${winner.prizeText}</strong>`;
                    spanElement.style.display = 'block';
                    spanElement.style.marginTop = '10px';
                    document.getElementById('zhongjiangming').appendChild(spanElement);
                });
            }
        };
    </script>
</body>

</html>
